<template>
  <div class='user-profile-page'>
    <van-nav-bar left-arrow @click-left="$router.back()" title="个人信息"></van-nav-bar>
    <van-cell-group >
      <van-cell is-link title="头像" center>
        <van-image
        @click="showAvator=true"
          slot="default"
          fit="cover"
          round
          :src="user.photo"
        />
      </van-cell>
      <van-cell is-link title="昵称" @click="openNamePopup" :value="user.name||'未填写'" />
    </van-cell-group>
    <van-cell-group style="margin-top:12px">
      <van-cell is-link title="性别" :value="user.gender?'女':'男'" @click="showGender=true"/>
      <van-cell is-link title="生日" :value="user.birthday" @click="showBirthday=true"/>
    </van-cell-group>
    <div class="logout">
      <span @click="logout">退出登录</span>
    </div>

    <!-- 更换头像 -->
    <van-action-sheet
    v-model="showAvator"
    :actions="[{ name: '相机拍照' }, { name: '本地选择' }]"
    cancel-text="取消"
    close-on-click-action
    @cancel="onCancel"
    @select="selectOption"
    />
    <input type="file" style="display:none" ref="file" @change="selectImage">

    <!-- 修改昵称 -->
    <van-popup class="my-popup" v-model="showName" position="right">
      <van-nav-bar
        left-arrow
        @click-left="showName=false"
        right-text="保存"
        title="修改昵称"
         @click-right="saveName"
      />
      <van-field v-model="name"></van-field>
    </van-popup>

    <!-- 修改性别 -->
    <van-action-sheet
      v-model="showGender"
      :actions="[{ name: '男', value: 0 }, { name: '女', value: 1 }]"
      @select="saveGender"
      cancel-text="取消"
    />

    <!-- 修改生日 -->
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        v-model="birthday"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showBirthday=false"
        @confirm="saveBirthday"
      />
    </van-popup>
  </div>
</template>
<script>
import { getUserProfile, updateUserPhoto, updateUser } from '@/api/user.js'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      name: '',
      user: {},
      showAvator: false,
      showName: false,
      showGender: false,
      showBirthday: false,
      birthday: null,
      minDate: new Date('1950/1/1'),
      maxDate: new Date()
    }
  },
  created () {
    this.getUser()
  },
  methods: {
    // 修改生日 注意日期提交的对象与字符串之间的变化
    async saveBirthday () {
      console.log(this.birthday)
      const tempBirday = dayjs(this.birthday).format('YYYY-MM-DD')
      if (tempBirday === this.user.birthday) {
        return this.$toast.fail('您尚未修改')
      }
      this.showBirthday = false
      await updateUser({
        birthday: dayjs(this.birthday).format('YYYY-MM-DD')
      })
      this.$toast.success('修改成功')
      this.user.birthday = dayjs(this.birthday).format('YYYY-MM-DD')
    },
    // 修改性别
    async saveGender (item) {
      this.showGender = false
      console.log(item)
      await updateUser({
        gender: item.value
      })
      this.$toast.success('修改成功')
      this.user.gender = item.value
    },
    // 打开昵称修改框
    openNamePopup () {
      this.showName = true
      this.name = this.user.name
    },
    // 修改昵称
    async saveName () {
      await updateUser({
        name: this.name
      })

      this.$toast.success('修改成功')
      this.showName = false
      this.user.name = this.name
    },
    onCancel () {
      // 关闭
    },
    // 修改头像
    async selectImage () {
      // 获取本地相册
      // console.log(this.$refs.file.files)
      var formData = new FormData()
      formData.append('photo', this.$refs.file.files[0])
      const data = await updateUserPhoto(formData)
      //   console.log(data)
      this.user.photo = data.photo
      this.$toast.success('修改成功')
    },
    selectOption (item) {
      console.log(item)
      if (item.name === '本地选择') {
        // 获取本地相册
        // 上传
        this.$refs.file.click()
      } else if (item.name === '相机拍照') {

      }
    },
    // 获取基本信息
    async getUser () {
      this.user = await getUserProfile()
    //   console.log(this.user)
    },
    // 退出登录
    logout () {
      // 提示
      this.$dialog.confirm({
        title: '温馨提示',
        message: '您确定要退出吗？',
        theme: 'round-button'
      }).then((data) => {
        console.log(data)
        // 1.清空token
        this.$store.commit('user/setToken', '', '')
        // 2.跳转
        this.$router.push('/')
        // 抛出异常
      }).catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.user-profile-page {
  background: #f8f8f8;
  .van-image {
    display: block;
    float: right;
    width: 30px;
    height: 30px;
  }
  .van-cell__title {
    width: 80px;
    flex: none;
  }
}
.logout {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 60px;
  width: 100%;
  color: @boke-color;
}
.my-popup {
  width: 100%;
  height: 100%;
  /deep/ .van-nav-bar__text {
    color: @boke-color;
  }
  /deep/ .van-field__control {
    background: @boke-gray-color;
    padding: 10px;
    border-radius: 4px;
  }
}
</style>
